<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  <script src="../common/js/jquery/jquery-3.5.1.min.js"></script>
  
  <title>油料管理</title>
  <style type="text/css">
    html,body{
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: hidden;
      margin: 0;
      padding: 0;
      background: url('./images/background.png') no-repeat;
      background-position:center center;
      background-size:100% 100%;
    }
    * {
      color: #fff;
    }
    .head {
      height: 6vh;
      min-height: 36px;
      max-height: 60px;
      padding: 6vh 6% 4vh 6%;
    }
    .head img {
      height: 100%;
      width: auto;
    }

    .row1 {
      height: 55%;
      /*flex: 1;*/
      padding: 0 6%;
      display: flex;
    }
    .row1 .left {
      width: 45%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 3%;
      overflow: hidden;
    }
    .row1 .left img {
      width: auto;
      height: 100%;
    }

    .row1 .middle {
      width: 25%;
      padding-right: 2%;
    }
    .row1 .middle .top {
      height: 20%;
      font-size: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .row1 .con {
      height: 80%;
      display: flex;
      flex-direction: column;
      background: url('./images/messagebg.png') no-repeat;
      background-position:center center;
      background-size:100% 100%;
    }
    .row1 .con-title {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #65C1FD;
      font-size: 1.15rem;
      padding: 5% 0;
    }
    .row1 .con-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 0.5rem;
    }
    .row1 .con-list .list-item:nth-child(odd) {
      background: url('./images/namebg.png') no-repeat;
      background-position:center center;
      background-size:100% 100%;
    }
    .row1 .con-list .list-item {
      height: 50%;
      display:flex;
    }
    .row1 .con-list .list-item-left {
      flex: 1;
      display:flex;
      justify-content: center;
      align-items: center;
    }
    .row1 .con-list .list-item-right {
      flex: 1;
      display:flex;
      justify-content: center;
      align-items: center;
    }

    .row1 .right {
      width: 25%;
    }
    .row1 .right .top {
      height: 20%;
      font-size: 1.5rem;
      display: flex;
      /*justify-content: center;*/
      align-items: center;
    }
    .row1 .right .top-left {
      flex: 1;
    }
    .row1 .right .top-right {
      flex: 1;
      height: 100%;
      font-size: 2.6rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .row1 .right .top-right img {
      height: 60%;
      width: auto;
      padding-left: 1rem;
    }

    .row2 {
      height: 16%;
      display: flex;
      padding: 2% 6% 3% 6%;
      justify-content: space-between;
    }
    .row2 .item {
      height: 100%;
      padding: 3px;
      max-width: 138px;
      display: flex;
      justify-content: center;
      position: relative;
    }
    .row2 .item:first-child {
      background: url('./images/avatarbg.png') no-repeat;
      background-position:center center;
      background-size:100% 100%;
      
    }
    .row2 .item .name {
      position: absolute;
      bottom: -20px;
    }
    .row2 .item img {
      height: 100%;
      width: auto;
      clip-path: circle();
    }
  </style>
</head>
<body>
<div class="container" style="width:100%;height:100%;display: flex;flex-direction: column;">
  
  <div class="head">
    <img src="./images/logo.png">
  </div>
  
  <div class="row1">
    <div class="left">
      <img src="./images/avatar.png">
    </div>

    <div class="middle">
      <div class="top">
        17:01
      </div>
      <div class="con">
        <div class="con-title">
          进入信息
        </div>
        <div id="intoList" class="con-list">
          
        </div>
      </div>
    </div>

    <div class="right">
      <div class="top">
        <div class="top-left">
          <div class="">
            2020/08/28
          </div>
          <div class="">
            星期五
          </div>
        </div>
        <div class="top-right">
          <span>晴</span>
          <img src="./images/sun.png">
        </div>
      </div>
      <div class="con">
        <div class="con-title">
          外出信息
        </div>
        <div id="outList" class="con-list">
          
        </div>
      </div>
    </div>
  </div>

  <div class="row2">
    <!-- <div class="item"> -->
      <div class="item">
        <img src="./images/avatar.png">
        <div class="name">
          胡欢
        </div>
      </div>
    <!-- </div> -->
    <div class="item">
      <img src="./images/avatar1.png">
    </div>
    <div class="item">
      <img src="./images/avatar1.png">
    </div>
    <div class="item">
      <img src="./images/avatar1.png">
    </div>
    <div class="item">
      <img src="./images/avatar1.png">
    </div>
    <div class="item">
      <img src="./images/avatar1.png">
    </div>
  </div>
  
</div>
<script src="../common/js/echarts/4.2.1/echarts.js"></script>
<script src="js/index.js"></script>
</body>
</html>